<template>
  <div class="progress-indicator" :class="{ 'compact': compact }">
    <!-- 圆形进度条 -->
    <div v-if="type === 'circle'" class="progress-circle">
      <svg
        :width="size"
        :height="size"
        viewBox="0 0 100 100"
        class="progress-svg"
      >
        <!-- 背景圆环 -->
        <circle
          cx="50"
          cy="50"
          :r="radius"
          fill="none"
          :stroke="backgroundColor"
          :stroke-width="strokeWidth"
        />
        <!-- 进度圆环 -->
        <circle
          cx="50"
          cy="50"
          :r="radius"
          fill="none"
          :stroke="progressColor"
          :stroke-width="strokeWidth"
          :stroke-dasharray="circumference"
          :stroke-dashoffset="strokeDashoffset"
          stroke-linecap="round"
          class="progress-path"
          :class="{ 'animated': animated }"
        />
      </svg>
      
      <!-- 中心内容 -->
      <div class="progress-center">
        <div v-if="showPercentage" class="progress-percentage">
          {{ Math.round(progress) }}%
        </div>
        <div v-if="status && showStatus" class="progress-status">
          {{ getStatusText(status) }}
        </div>
      </div>
    </div>
    
    <!-- 线性进度条 -->
    <div v-else class="progress-linear">
      <div class="progress-header" v-if="showHeader">
        <div class="progress-info">
          <span v-if="title" class="progress-title">{{ title }}</span>
          <span v-if="status && showStatus" class="progress-status">
            {{ getStatusText(status) }}
          </span>
        </div>
        <div v-if="showPercentage" class="progress-percentage">
          {{ Math.round(progress) }}%
        </div>
      </div>
      
      <div class="progress-track">
        <div
          class="progress-fill"
          :style="{
            width: progress + '%',
            backgroundColor: progressColor
          }"
          :class="{ 'animated': animated }"
        ></div>
        
        <!-- 条纹效果 -->
        <div
          v-if="striped"
          class="progress-stripes"
          :class="{ 'animated': animated }"
        ></div>
      </div>
      
      <div v-if="message" class="progress-message">
        {{ message }}
      </div>
    </div>
    
    <!-- 步骤进度条 -->
    <div v-if="type === 'steps'" class="progress-steps">
      <div class="steps-container">
        <div
          v-for="(step, index) in steps"
          :key="index"
          class="step-item"
          :class="{
            'completed': index < currentStep,
            'active': index === currentStep,
            'pending': index > currentStep
          }"
        >
          <div class="step-indicator">
            <div v-if="index < currentStep" class="step-check">
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <polyline points="20,6 9,17 4,12"/>
              </svg>
            </div>
            <div v-else-if="index === currentStep" class="step-current">
              <div class="step-spinner" v-if="animated">
                <div class="spinner"></div>
              </div>
              <span v-else>{{ index + 1 }}</span>
            </div>
            <span v-else class="step-number">{{ index + 1 }}</span>
          </div>
          
          <div class="step-content">
            <div class="step-title">{{ step.title }}</div>
            <div v-if="step.description" class="step-description">
              {{ step.description }}
            </div>
          </div>
          
          <!-- 连接线 -->
          <div
            v-if="index < steps.length - 1"
            class="step-connector"
            :class="{ 'completed': index < currentStep }"
          ></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'

interface Step {
  title: string
  description?: string
}

interface Props {
  type?: 'linear' | 'circle' | 'steps'
  progress?: number
  status?: 'pending' | 'processing' | 'completed' | 'failed' | 'cancelled'
  title?: string
  message?: string
  size?: number
  strokeWidth?: number
  showPercentage?: boolean
  showStatus?: boolean
  showHeader?: boolean
  animated?: boolean
  striped?: boolean
  compact?: boolean
  color?: string
  backgroundColor?: string
  steps?: Step[]
  currentStep?: number
}

const props = withDefaults(defineProps<Props>(), {
  type: 'linear',
  progress: 0,
  size: 120,
  strokeWidth: 8,
  showPercentage: true,
  showStatus: true,
  showHeader: true,
  animated: true,
  striped: false,
  compact: false,
  color: '#3b82f6',
  backgroundColor: '#e5e7eb',
  steps: () => [],
  currentStep: 0
})

// 计算属性
const radius = computed(() => {
  return (100 - props.strokeWidth) / 2
})

const circumference = computed(() => {
  return 2 * Math.PI * radius.value
})

const strokeDashoffset = computed(() => {
  const progress = Math.min(Math.max(props.progress, 0), 100)
  return circumference.value - (progress / 100) * circumference.value
})

const progressColor = computed(() => {
  if (props.status === 'completed') return '#10b981'
  if (props.status === 'failed') return '#ef4444'
  if (props.status === 'cancelled') return '#6b7280'
  return props.color
})

// 方法
const getStatusText = (status: string): string => {
  const statusMap: Record<string, string> = {
    pending: '等待中',
    processing: '处理中',
    completed: '已完成',
    failed: '失败',
    cancelled: '已取消'
  }
  return statusMap[status] || status
}
</script>

<style scoped>
.progress-indicator {
  width: 100%;
}

.progress-indicator.compact {
  font-size: 14px;
}

/* 圆形进度条 */
.progress-circle {
  position: relative;
  display: inline-block;
}

.progress-svg {
  transform: rotate(-90deg);
}

.progress-path {
  transition: stroke-dashoffset 0.6s ease;
}

.progress-path.animated {
  animation: progress-dash 2s ease-in-out infinite;
}

@keyframes progress-dash {
  0% {
    stroke-dasharray: 1, 200;
    stroke-dashoffset: 0;
  }
  50% {
    stroke-dasharray: 89, 200;
    stroke-dashoffset: -35px;
  }
  100% {
    stroke-dasharray: 89, 200;
    stroke-dashoffset: -124px;
  }
}

.progress-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

.progress-percentage {
  font-size: 18px;
  font-weight: 600;
  color: #374151;
  line-height: 1;
}

.progress-circle .progress-status {
  font-size: 12px;
  color: #6b7280;
  margin-top: 4px;
}

/* 线性进度条 */
.progress-linear {
  width: 100%;
}

.progress-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.progress-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.progress-title {
  font-size: 14px;
  font-weight: 500;
  color: #374151;
}

.progress-linear .progress-status {
  font-size: 12px;
  color: #6b7280;
}

.progress-linear .progress-percentage {
  font-size: 14px;
  font-weight: 500;
  color: #374151;
}

.progress-track {
  position: relative;
  width: 100%;
  height: 8px;
  background-color: #e5e7eb;
  border-radius: 4px;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  border-radius: 4px;
  transition: width 0.6s ease;
  position: relative;
}

.progress-fill.animated {
  background-image: linear-gradient(
    45deg,
    rgba(255, 255, 255, 0.2) 25%,
    transparent 25%,
    transparent 50%,
    rgba(255, 255, 255, 0.2) 50%,
    rgba(255, 255, 255, 0.2) 75%,
    transparent 75%,
    transparent
  );
  background-size: 20px 20px;
  animation: progress-stripes 1s linear infinite;
}

@keyframes progress-stripes {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 20px 0;
  }
}

.progress-stripes {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: linear-gradient(
    45deg,
    rgba(255, 255, 255, 0.2) 25%,
    transparent 25%,
    transparent 50%,
    rgba(255, 255, 255, 0.2) 50%,
    rgba(255, 255, 255, 0.2) 75%,
    transparent 75%,
    transparent
  );
  background-size: 20px 20px;
}

.progress-stripes.animated {
  animation: progress-stripes 1s linear infinite;
}

.progress-message {
  margin-top: 8px;
  font-size: 12px;
  color: #6b7280;
}

/* 步骤进度条 */
.progress-steps {
  width: 100%;
}

.steps-container {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.step-item {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.step-indicator {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 500;
  transition: all 0.3s ease;
}

.step-item.completed .step-indicator {
  background: #10b981;
  color: white;
}

.step-item.active .step-indicator {
  background: #3b82f6;
  color: white;
}

.step-item.pending .step-indicator {
  background: #f3f4f6;
  color: #6b7280;
  border: 2px solid #e5e7eb;
}

.step-check {
  color: white;
}

.step-current {
  display: flex;
  align-items: center;
  justify-content: center;
}

.step-spinner {
  width: 16px;
  height: 16px;
}

.spinner {
  width: 100%;
  height: 100%;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top: 2px solid white;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.step-content {
  flex: 1;
  padding-top: 4px;
}

.step-title {
  font-size: 14px;
  font-weight: 500;
  color: #374151;
  margin-bottom: 2px;
}

.step-item.completed .step-title {
  color: #10b981;
}

.step-item.active .step-title {
  color: #3b82f6;
}

.step-item.pending .step-title {
  color: #9ca3af;
}

.step-description {
  font-size: 12px;
  color: #6b7280;
  line-height: 1.4;
}

.step-connector {
  position: absolute;
  left: 15px;
  top: 32px;
  bottom: -16px;
  width: 2px;
  background: #e5e7eb;
}

.step-connector.completed {
  background: #10b981;
}

.step-item:last-child .step-connector {
  display: none;
}

/* 响应式设计 */
@media (max-width: 640px) {
  .progress-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }
  
  .progress-circle {
    width: 100px;
    height: 100px;
  }
  
  .progress-percentage {
    font-size: 16px;
  }
  
  .step-item {
    gap: 8px;
  }
  
  .step-indicator {
    width: 28px;
    height: 28px;
    font-size: 12px;
  }
  
  .step-connector {
    left: 13px;
    top: 28px;
  }
}

/* 紧凑模式 */
.compact .progress-track {
  height: 4px;
}

.compact .progress-percentage {
  font-size: 12px;
}

.compact .progress-title {
  font-size: 12px;
}

.compact .step-indicator {
  width: 24px;
  height: 24px;
  font-size: 12px;
}

.compact .step-title {
  font-size: 12px;
}

.compact .step-description {
  font-size: 11px;
}
</style>